<template>
  <div class="lotteryMoney hideScrollBar" ref="scrollEl">
    <div
      v-if="lottery"
      class="lotteryMoney-bg"
      :class="{ 'lotteryMoney-bg-sun': isSun }"
    ></div>
    <!-- 导航 -->
    <NavBar
      isFixed
      :title="pageTitle"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#fff"
      :scrollEl="scrollEl"
    />
    <!-- 骨架占位 -->
    <template v-if="!lottery">
      <van-skeleton title :row="6" style="margin-top: 25px" />
      <van-skeleton style="margin-top: 25px">
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>
    </template>
    <div v-else>
      <!-- 活动已结束 -->
      <LotteryEnd
        v-if="activitytStatus == 3"
        :lottery="lottery"
        :status="activitytStatus"
        :isSun="isSun"
        :isDetail="true"
        :inviterInfo="lottery.inviterInfo"
      >
        <!-- 下注记录 -->
        <div
          class="xzjl items-center"
          :class="{
            'xzjl-sun': isSun,
          }"
          @click="jumpPage"
        >
          {{ $t("lotteryMoney.blxzjl") }}
          <img v-if="isSun" class="xzjl-jt" src="/image/jt-right1-icon.svg" />
          <img v-else class="xzjl-jt" src="/image/jt-blue-right-icon.svg" />
        </div>
      </LotteryEnd>
    </div>
  </div>
</template>
<script setup name="lotteryMoney">
import { getSessionRecordDetail } from "@/api/lottery";
import { decimalToLength, debounce } from "@/utils";
import { useGlobalStore } from "~~/store/global";
import LotteryEnd from "../../components/lotterymoney/lottery-end.vue";

// definePageMeta({
//   keepalive: true,
// });

const route = useRoute();
console.log("页面参数:", route.query);

const { t } = useI18n();
const scrollEl = ref();

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  serverTime: 0,
  lotteryPoolAmount: "", // 奖池美金数量(5 位小数)
  sessionStatus: null,
});

const pageTitle = computed(() => {
  // if (lottery.value) {
  //   return `${formatWithTimeZone(lottery.value.beginTime, "Asia/Jakarta")} ${t(
  //     "lotteryMoney.cjxq"
  //   )}`;
  // }

  return t("lotteryMoney.cjxq");
});

// 活动样式逻辑状态  0:上线前几天(没有幸运抽奖) 1 未开始  2 进行中  3 已结束(后端正在结算) 4 重试状态 5 已结束(结算完成) 6 结算中
const activitytStatus = computed(() => {
  if (
    pageData.sessionStatus == 0 ||
    pageData.sessionStatus == 3 ||
    pageData.sessionStatus == 5
  ) {
    return 3;
  }
  return 1;
});

// 抽奖信息
const lottery = ref();
const moneyValue = ref(0);

// 是不是周日
const isSun = computed(() => {
  if (lottery.value) {
    return lottery.value.sessionId == lottery.value.periodId;
  }
  return false;
});

// 查询抽奖信息
const getSessionRecordDetailRequest = async () => {
  // 1. 是否需要 loadding
  showLoadingToast({
    message: `${t("common.requestIng")}...`,
    forbidClick: true,
    duration: 15000,
  });
  // 2. 请求
  let res = await getSessionRecordDetail({
    sessionId: route.query.sessionId,
  });
  // closeToast();
  if (res) {
    res.beginTime = res.sessionTime;
    // 5. 赋值逻辑
    pageData.sessionStatus = res.sessionStatus;
    lottery.value = res;
    if (res.pool) {
      pageData.lotteryPoolAmount = res.pool.lotteryPoolAmount;
      moneyValue.value = Number(decimalToLength(res.pool.lotteryPoolAmount));
    } else {
      moneyValue.value = 0;
      pageData.lotteryPoolAmount = 0;
    }
  }
};

onMounted(async () => {
  firebase?.logEvent("BDC_H5_previousDrawsDetail_PUV");
  getSessionRecordDetailRequest();
});

// 页面跳转
const jumpPage = () => {
  navigateI18nTo({
    path: "/lottery-money/record-bet",
    query: {
      hashScoreLength: lottery.value.hashPk
        ? lottery.value.hashPk.hashScoreLength
        : 6,
      sessionId: lottery.value.sessionId,
      beginTime: lottery.value.beginTime,
      lotteryPoolAmount: lottery.value
        ? lottery.value.pool.lotteryPoolAmount || 0
        : 0,
      sessionUserCount: lottery.value.sessionUserCount || 0,
      sessionTotalDrawCount: lottery.value.sessionTotalDrawCount || 0,
    },
  });
};

// 期数格式化
const formatWithTimeZone = (date, timeZone) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}.${month}.${day}`;
};
</script>
<style lang="scss" scoped>
.lotteryMoney {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  background: transparent;
  background-color: #f0f3fa;
  padding-bottom: var(--safe-area-inset-bottom);

  &-bg {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100vw;
    height: 300 * 2px;
    background: linear-gradient(
      180deg,
      #56a8ff 0.02%,
      rgba(178, 237, 255, 0.5) 40.5%,
      rgba(178, 237, 255, 0) 99.98%
    );
    &-sun {
      background: linear-gradient(
        180deg,
        #ffcf56 0.07%,
        rgba(255, 233, 178, 0.5) 40.51%,
        rgba(255, 233, 178, 0) 99.93%
      );
    }
  }
}
.xzjl {
  position: relative;
  margin-top: 20 * 2px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4 * 2px 10 * 2px;
  border-radius: 100px;
  display: inline-flex;
  border: 2px solid #99caff;
  color: #007bff;
  font-size: 13 * 2px;
  font-weight: 590;
  &-sun {
    border: 2px solid #ffb800;
    color: #ffb800;
  }
  &-jt {
    margin-left: 8 * 2px;
    width: 10 * 2px;
    height: 10 * 2px;
  }
}
</style>
